<template>
  <div class="page-content">
    <header>
      <h1>
        <span>智慧鸽业大数据可视化</span>
      </h1>
      <p>
        <span>Smart pigeon data visualization</span>
      </p>
    </header>
    <!-- 主题模块 -->
    <div class="main">
      <div class="nav_btn">
        <div class="btn_left">
          <el-button type="text">
            <router-link to="../Navigation" class="btn_list listActive">主页</router-link>
          </el-button>
          <!-- <el-button type="text">
            <div class="btn_list listActive">主页</div>
          </el-button> -->
          <el-button type="text" @click="openEven">
            <div class="btn_list">生产统计</div>
          </el-button>
          <el-button type="text" @click="openDialog">
            <div class="btn_list">流通销售</div>
          </el-button>
        </div>
        <div class="btn_right">
        </div>
      </div>
      <!-- 概览 -->
      <div class="top5">
        <div class="baseBoxLeft left">
          <div class="top5-title">
            <span>概览</span>
          </div>
          <img src="@/assets/images/left.png" alt="" style="z-index: 1;">
        </div>

        <div class="top5-content">
          <ul>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>养殖基地数量</span>
                <span>1586</span>

              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>加工厂数量</span>
                <span>15</span>
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>当前员工数量</span>
                <span>2737</span>
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>总订单数</span>
                <span>15862</span>
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>营业额</span>
                <span>15862</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="top5-title">
          <span>视频监控</span>
        </div>
        <ul>
          <!-- <li style="display: block;" class="contList">
          <div class="boxVideo" style="display: block;">
            <video class="video-js vjs-big-play-button" data-setup='{}' controls>
              <source src="http://hls01open.ys7.com/openlive/ea2001c1aec344d1ac45d8b0bbc74e87.m3u8" type="application/x-mpegURL">
            </video>
          </div>
        </li> -->
          <li class="contList">
            <div class="boxVideo">
              <!-- <video class="video-js vjs-big-play-button" data-setup='{}' controls>
                <source src="" type="application/x-mpegURL">
              </video> -->
              <!-- <iframe src="https://www.qkeep.cn/v.php?url=http://hls01open.ys7.com/openlive/e0b2597699cd4e4cbb0f2043e769bce2.hd.m3u8">
              </iframe> -->
              <ezuiKitTwo vedioUrl="http://hls01open.ys7.com/openlive/e0b2597699cd4e4cbb0f2043e769bce2.hd.m3u8" style="width:100%; height:100%;" />
            </div>
          </li>
        </ul>
      </div>
      <!-- 销售总额 -->
      <div class="total">
        <!-- 当前时间 -->
        <div class="time">
          <span>{{dateFormat(newDate)}}</span>
        </div>
        <div class="sphere">
          <div class="sphere-bg"></div>
          <div class="sum">
            <span>销售总额</span>
            <p>8232873</p>
          </div>
        </div>
        <div class="cicle3"></div>
        <div class="cicle4"></div>
        <div class="cicle5"></div>
        <div class="cicle6"></div>
        <div class="cicle7"></div>
        <div class="cicle8">
          <span>年销售</span>
          <p>28273</p>
        </div>
        <div class="cicle9">
          <span>月销售</span>
          <p>1929</p>
        </div>
        <div class="cicle10">
          <span>周销售</span>
          <p>123</p>
        </div>
        <div class="cicle11">
          <span>日销售</span>
          <p>34</p>
        </div>
      </div>
      <!-- 交易数省份Top5 -->
      <!-- 交易数省份Top5 -->
      <div class="analyse">
        <div class="baseBoxLeft left">
          <div class="analyse-title">
            <span>交易数省份Top5</span>
          </div>
          <img src="@/assets/images/left.png" alt="" style="z-index: 1;">
        </div>
        <div class="analyse-content"></div>
        <div class="analyse-title">
          <span>交易数省份Top5</span>
        </div>
        <div class="Chart2"></div>
      </div>

    </div>
    <!-- 底部模块 -->
    <div class="bottom">
      <span>数据状况</span>
      <p>Data Status</p>
    </div>
    <Statistics ref="mychild" :dialogVisible="dialogVisible" v-show="dialogVisible" @closeDialog="closeDialog" />
    <SalesDetails ref="thechild" :salesDialog="salesDialog" v-show="salesDialog" @closeDialog="closeDialog" />
  </div>
</template>

<script>
import echarts from 'echarts-stat'

import Statistics from '@/components/DataVisual/Statistics'
import SalesDetails from '@/components/DataVisual/SalesDetails'
import ezuiKitTwo from '@/components/video/EZUIKitJsTwo.vue'

export default {
  name: 'DataVisual',
  meta: {
    title: '大数据可视化',
  },
  components: {
    Statistics,
    SalesDetails,
    ezuiKitTwo,
  },
  data() {
    return {
      // 当前时间
      newDate: new Date(),
      dialogVisible: false,
      salesDialog: false,
    }
  },
  created() {
    this.$nextTick(() => {
      this.Chart1()
      this.Chart2()
    })
  },
  watch: {},
  methods: {
    // 时间格式化
    dateFormat() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      let week = date.getDay() // 星期
      let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      // 拼接 时间格式处理
      return (
        year +
        '年' +
        month +
        '月' +
        day +
        '日 ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds +
        ' ' +
        weekArr[week]
      )
    },
    //各省份订单柱状图
    Chart1() {
      let myChart = this.$echarts.init(document.querySelector('.analyse-content'))
      let data = []
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200))
      }
      let option = {
        xAxis: {
          max: 'dataMax',
        },
        yAxis: {
          type: 'category',
          data: ['广东', '江西', '湖南', '北京', '河南', '湖北', '广西', '河北'],
          axisLabel: {
            show: true,
            fontSize: 8,
          },
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4,
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            data: data,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
            },
            itemStyle: {
              color: '#0ac1c7',
            },
          },
        ],
        legend: {
          show: true,
        },
        animationDuration: 3000,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
      }

      function update() {
        var data = option.series[0].data
        for (var i = 0; i < data.length; ++i) {
          if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 200)
          } else {
            data[i] += Math.round(Math.random() * 20)
          }
        }
        myChart.setOption(option)
      }

      setInterval(function () {
        update()
      }, 3000)
      window.onresize = myChart.resize
    },
    Chart2() {
      let myChart = this.$echarts.init(document.querySelector('.Chart2'))
      let option = {
        color: ['#0ac1c7', '#0ac1c7', '#0ac1c7', '#0ac1c7', '#0ac1c7'],

        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            grid: {
              x: 25,
              y: 25,
              x2: 5,
              y2: 20,
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: '广东' },
              { value: 735, name: '江苏' },
              { value: 580, name: '浙江' },
              { value: 484, name: '北京' },
              { value: 300, name: '上海' },
            ],
          },
        ],
      }
      window.onresize = myChart.resize
      myChart.setOption(option)
    },
    //打开表单
    openEven() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.mychild.ChartNum1()
        this.$refs.mychild.ChartNum2()
        this.$refs.mychild.ChartNum3()
        this.$refs.mychild.ChartNum4()
      })
    },
    openDialog() {
      this.salesDialog = true
      this.$nextTick(() => {
        this.$refs.thechild.ChartNum5()
        this.$refs.thechild.ChartNum6()
        this.$refs.thechild.ChartNum7()
        this.$refs.thechild.ChartNum8()
      })
    },
    //关闭表单
    closeDialog(a) {
      this.dialogVisible = a
      this.salesDialog = a
    },
  },
  mounted() {
    let that = this
    this.timer = setInterval(function () {
      that.newDate = new Date().toLocaleString()
    })
  },
  // 销毁时清除计时器
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
}
</script>

<style src="@/assets/css/style.css" scoped>
</style>